<template>
  <div class="tets_box">
    <!-- <KeLong /> -->
    <TestProp :propData="propData" @receDate="ReEvent" ref="son_ref" :propFn="propFn" />
    <button @click="handleRefSonFn">调用子组件方法</button>
    <br />
    <button @click="hhh">hhhhh</button>
    <p v-for="item in provideDAte" :key="item">provide+inject :::{{ item }}</p>
    <br />
    <hr />
    <h2>2 测试iconfont 图标</h2>
    <i class="iconelplus iconpls-31quanbushangpin"></i>
    <i class="iconelplus iconpls-gouwuche"></i>
    <hr />

    <h2>3测试solt 插槽</h2>
    <TestSolt>
      <p>具名插槽 默认插槽 插槽写法</p>
      <template #box55> box5555555 </template>
      <template v-slot:ggg> gggggg </template>
      <h2>4 测试axios 请求以及vue.config.js</h2>
    </TestSolt>

    <h2>5 symbol 学习</h2>
    <hr />
    <h2>6 object-fit</h2>
    <div class="imgbox">
      <img class="set_img" src="http://192.168.0.189:3000/public/images/1678906956276.jpg" alt="dsd" />
    </div>
    <img class="set_img1" src="http://192.168.0.189:3000/public/images/1678906951830.jpg" alt="dsd" />

    <hr />
    <h2>vertical-align</h2>
    <div class="set_vertical">
      查好<el-icon class="rigggg"><ArrowRightBold /></el-icon>
    </div>

    <hr />
    <h2>元素分类</h2>
    <b>加粗</b><strong>加粗</strong> <i>斜体</i> <em>斜体</em> <del>del</del> <ins>ins</ins> <span>span</span>
    <code>let keysymbolArr = Object.getOwnPropertySymbols(toRaw(provideDAte));</code>
    <p>行内块元素：img input textarea</p>

    <hr />
    <h2>css 盒模型</h2>
    <div class="hebox1">box1</div>
    <p>jdjjv</p>
    <div class="hebox2">box2</div>
  </div>
</template>

<script setup>
// import KeLong from '../components/KeLong.vue';
import TestProp from '../components/TestProp.vue';
import TestSolt from '../components/SlotTest.vue';

import { getCurrentInstance, onMounted, provide, reactive, toRaw } from 'vue';
// 通过ref 调用子组件的方法
var cinstance;

let propData = {
  name: 'cx',
  age: 12
};

let provideDAte = reactive({
  info: 'pyovide',
  age: 12,
  [Symbol('kk')]: 'kk'
});
provide('provideDAte', provideDAte);
console.log('provideDAte', provideDAte);
let roobj = toRaw(provideDAte);
console.log('toRaw(provideDAte)', roobj);
let keysymbolArr = Object.getOwnPropertySymbols(toRaw(provideDAte));
console.log('provideDAte.getOwnPropertySymbols', provideDAte[keysymbolArr[0]]);

const hhh = () => {
  window.open('/');
  window.document.documentElement.scrollTop = 0;
};

// prop形式函数 事件 子->父
const propFn = (value) => {
  console.log('prop形式函数 事件 子->父', value);
};

// 自定义事件子-父通信
const ReEvent = (value) => {
  console.log('自定义事件子-父通信', value);
};
const handleRefSonFn = () => {
  // console.log(cinstance.refs);
  cinstance.refs.son_ref.refFn('gg');
};

onMounted(() => {
  // 通过ref 调用子组件的方法
  cinstance = getCurrentInstance();
});

let studentObj = {
  name: 'zs',
  age: 18,
  [Symbol('level')]: 'A类' //这个属性学生等级希望老师看见而家长不要
};
// 获取对象属性的方法 for in
for (const key in studentObj) {
  console.log(key);
}
// Object.keys
console.log(Object.keys(studentObj));
// Object.getOwnPropertyNames
console.log(Object.getOwnPropertyNames(studentObj));

// Object.getOwnPropertySymbols
console.log(Object.getOwnPropertySymbols(studentObj));
</script>

<style lang="scss" scoped>
@use '@/styles/mixin' as Mixin;

// .iconelplus {
//   width: 1em;
//   height: 1em;
//   vertical-align: -0.15em;
//   fill: currentColor;
//   overflow: hidden;
// }

.tets_box {
  @include Mixin.mainWidth;
  padding: 16px;

  .imgbox {
    background-color: #f8f8f8;
    .set_img {
      width: 300px;
      height: 200px;
      object-fit: cover;
      object-position: left top;
      transition: 1s;
    }
    &:hover .set_img {
      object-position: right bottom;
    }
  }
  .set_img1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid pink;
    object-fit: cover;
  }

  .set_vertical {
    // display: flex;
    // align-items: center;
    height: 50px;
    background-color: #000;
    color: #fff;
    line-height: 50px;
    text-align: center;
    .rigggg {
      vertical-align: middle;
      display: inline-block;
    }
  }

  .hebox1 {
    width: 100px;
    height: 100px;
    background: #000;
    padding: 4px;
  }

  .hebox2 {
    width: 100px;
    height: 100px;
    background-color: pink;
    padding: 4px;
    box-sizing: content-box !important;
    border: 2px solid #f40;
    margin: 2px;
  }
}
</style>
